<html>
	<head>
		<style type="text/css">
			.customerList_table,.orderList_table{
				border:10px outset;
				margin-left: auto;
				margin-right: auto;
			}
			.customerList_table td,.orderList_table td{
				border:1px inset;
				text-align: center;
			}
			.customerList_div,.orderList_div{
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			///get the URL argument value,'argname' is its name
			function Request(argname){ 
				var url = document.location.href; 
				var arrStr = url.substring(url.indexOf("?")+1).split("&"); 
				for(var i =0;i<arrStr.length;i++) 
				{ 
					var loc = arrStr[i].indexOf(argname+"="); 
					if(loc!=-1) 
					{ 
						return arrStr[i].replace(argname+"=","").replace("?",""); 
						break; 
					}
				}
				return ""; 
			}

			//Load the XML file according to the parameter URL.
			//Then check its format.
			//If load successfully and can pass the check, return true, or return false.
			function loadXML(URL){
				try{
					//URL=what.URL_text.value;
					if (document.implementation && document.implementation.createDocument)
					{
						xmlDoc= document.implementation.createDocument("","doc",null);
						xmlDoc.async=false;    //make sure doc is fully loaded
						loaded = xmlDoc.load(URL);
						if(!loaded){
							alert("Error in XML File!");
							return false;
						}
						if(!checkXMLFormat(xmlDoc)){
							return false;
						}
						return true;
					}
				}catch(e){
					alert(e.message);
				}
			}

			//Check the XML file's format
			//Check points consist of two parts.
			//1)If the XML file contains the data of customers.
			//2)If the XML file has the order data that has no corresponding customer data.
			//If the file pass the check, return ture, or return false.
			function checkXMLFormat(xmlDoc){

				var customers=new Array();
				var indexOfcustomers=0;
				var root=xmlDoc.documentElement;
				var customerRoots=root.getElementsByTagName("Customers");
				var indexOfCustomerRoots=nextNodeType(customerRoots,1,-1);

				while(indexOfCustomerRoots!=-1){
					var customersList=customerRoots[indexOfCustomerRoots].childNodes;
					var indexOfCustomersList=nextNodeType(customersList,1,-1);
					if(indexOfCustomersList==-1){
						indexOfCustomerRoots=nextNodeType(customerRoots,1,indexOfCustomerRoots);

						continue;
					}
					while(indexOfCustomersList!=-1){
						customers[indexOfcustomers++]=customersList[indexOfCustomersList].attributes[nextNodeType(customersList[indexOfCustomersList].attributes,2,-1)].value;
						indexOfCustomersList=nextNodeType(customersList,1,indexOfCustomersList);
					}
					indexOfCustomerRoots=nextNodeType(customerRoots,1,indexOfCustomerRoots);
				}
				
				if(customers.length==0){
					alert("The xml file contains no customer!");
					return false;
				}				

				var ordersRoots=root.getElementsByTagName("Orders");
				var indexOfOrdersRoots=nextNodeType(ordersRoots,1,-1);
				while(indexOfOrdersRoots!=-1){
					var orders=ordersRoots[indexOfOrdersRoots].childNodes;
					var indexOfOrders=nextNodeType(orders,1,-1);
					while(indexOfOrders!=-1){
					for(var i=0;i<customers.length;i++){
						if(orders[indexOfOrders].getElementsByTagName("CustomerID")[0].childNodes[0].nodeValue==customers[i])
							break;
					}
					if(i==customers.length){
						 alert("The order with CustomerID '"+orders[indexOfOrders].getElementsByTagName("CustomerID")[0].childNodes[0].nodeValue+"' has no corresponding customer!");
						 return false;
					}
					indexOfOrders=nextNodeType(orders,1,indexOfOrders);
					}
					indexOfOrdersRoots=nextNodeType(ordersRoots,1,indexOfOrdersRoots);
				}
				
				return true;
			}

			//Generate a HTML table that displays the customers list.
			//The table is contained in a DIV block. The DIV will be written into the BODY by using document.write() method in the end of this function.
			//The column names ('td' tags) are generated automatically according to the nodename. So if the other XML files have different data name, they also can be displayed correctly.
			function generateCustomerList(){
				var body_text="<div class=\"customerList_div\"><form name=\"form_customerList\"><table class=\"customerList_table\"><tr><td>List of Customer Information</td></tr>";
				body_text+="<tr><td>Select One<br/>Click Submit</td>";
				var root=xmlDoc.documentElement;
				var customerRoots=root.getElementsByTagName("Customers");
				var indexOfCustomerRoots=nextNodeType(customerRoots,1,-1);

				var customersList=customerRoots[indexOfCustomerRoots].childNodes;
				var indexOfCustomersList=nextNodeType(customersList,1,-1);
				var customerItems=customersList[indexOfCustomersList].childNodes;
				var indexOfCustomerItems=-1;
				var attributes=customersList[indexOfCustomersList].attributes;
				var indexOfAttributes=nextNodeType(attributes,2,-1);
				body_text+="<td>"+attributes[indexOfAttributes].name+"</td>";
				header="";
				indexOfCustomerItems=nextNodeType(customerItems,1,indexOfCustomerItems);
				while(indexOfCustomerItems!=-1){
					header=customerItems[indexOfCustomerItems].nodeName;
					if(header!="FullAddress"&&header!="Fax")
						body_text+="<td>"+header+"</td>";
					indexOfCustomerItems=nextNodeType(customerItems,1,indexOfCustomerItems)
				}
				body_text+="</tr>";
				
				while(indexOfCustomerRoots!=-1){
					var customersList=customerRoots[indexOfCustomerRoots].childNodes;
					var indexOfCustomersList=nextNodeType(customersList,1,-1);
					var customerItems=customersList[indexOfCustomersList].childNodes;
					var indexOfCustomerItems=-1;
					while(indexOfCustomersList!=-1){
					customerItems=customersList[indexOfCustomersList].childNodes;
					indexOfCustomerItems=nextNodeType(customerItems,1,-1);
					var text="";
					body_text+="<tr>";
					attributes=customersList[indexOfCustomersList].attributes;
					indexOfAttributes=nextNodeType(attributes,2,-1);
					body_text+="<td><input type=\"radio\" name=\"selectItem\" value=\""+attributes[indexOfAttributes].value+"\"+/></td>";

					body_text+="<td>"+attributes[indexOfAttributes].value+"</td>";
					while(indexOfCustomerItems!=-1){
						if(customerItems[indexOfCustomerItems].nodeName!="Fax"&&customerItems[indexOfCustomerItems].nodeName!="FullAddress"){
							itemChildNodes=customerItems[indexOfCustomerItems].childNodes;
							indexOfItemChildNodes=nextNodeType(itemChildNodes,3,-1);
							text=itemChildNodes[indexOfItemChildNodes].nodeValue;
							body_text+="<td>"+text+"</td>";
						}
						indexOfCustomerItems=nextNodeType(customerItems,1,indexOfCustomerItems);
					}
					body_text+="</tr>";
					indexOfCustomersList=nextNodeType(customersList,1,indexOfCustomersList);
					}
					indexOfCustomerRoots=nextNodeType(customerRoots,1,indexOfCustomerRoots);
				}
				

				body_text+="</table>"
				body_text+="<input type=\"button\" value=\"submit\" onclick=\"openNewWindow('orders',this.form)\"/>"
				body_text+="</form></div>";
				document.write(body_text);
			}

			//Generate a HTML table that displays the order data corresponding to the selected customer.
			//The table is contained in a DIV block. The DIV will be written into the BODY by using document.write() method in the end of this function.
			//The column names ('td' tags) are generated automatically according to the nodename. So if the other XML files have different data name, they also can be displayed correctly.
			function generateOrderList(customerID){
				var body_text="<div class=\"customerList_div\"><table class=\"customerList_table\"><tr><td>Orders for</br>Customer "+customerID+"</td></tr>";
				var root=xmlDoc.documentElement;
				// var indexOfRoot=nextNodeType(root.childNodes,1,-1);
				// indexOfRoot=nextNodeType(root.childNodes,1,indexOfRoot);
				var ordersRoots=root.getElementsByTagName("Orders");
				var indexOfOrdersRoots=nextNodeType(ordersRoots,1,-1);
				var orders=ordersRoots[indexOfOrdersRoots].childNodes;
				var indexOfOrders=nextNodeType(orders,1,-1);
				var orderItems=orders[indexOfOrders].childNodes;
				var indexOfOrderItems=nextNodeType(orderItems,1,-1);
				body_text+="<tr>";
				var header="";
				while(indexOfOrderItems!=-1){
					header=orderItems[indexOfOrderItems].nodeName;
					if(header!="ShipInfo"&&header!="CustomerID"&&header!="EmployeeID"){
						body_text+="<td>"+header+"</td>";
					}else if(header=="ShipInfo"){
						body_text+="<td>ShipInfo</td>";
						var ShipInfo=orderItems[indexOfOrderItems].childNodes;
						var indexOfShipInfo=nextNodeType(ShipInfo,1,-1);
						while(indexOfShipInfo!=-1){
							var infoHeader=ShipInfo[indexOfShipInfo].nodeName;
							body_text+="<td>"+infoHeader+"</td>";
							indexOfShipInfo=nextNodeType(ShipInfo,1,indexOfShipInfo);
						}
					}
					indexOfOrderItems=nextNodeType(orderItems,1,indexOfOrderItems);
				}
				
				while(indexOfOrdersRoots!=-1){
					var orders=ordersRoots[indexOfOrdersRoots].childNodes;
					var indexOfOrders=nextNodeType(orders,1,-1);
					while(indexOfOrders!=-1){
						var orderItems=orders[indexOfOrders].childNodes;
						var indexOfOrderItems=nextNodeType(orderItems,1,-1);
						var itemChildNodes=orderItems[indexOfOrderItems].childNodes;
						var indexOfItemChildNodes=nextNodeType(itemChildNodes,3,-1);
						if(itemChildNodes[indexOfItemChildNodes].nodeValue!=customerID){
							indexOfOrders=nextNodeType(orders,1,indexOfOrders);
							continue;
						}
						body_text+="<tr>";
						while(indexOfOrderItems!=-1){
							header=orderItems[indexOfOrderItems].nodeName;
							if(header!="ShipInfo"&&header!="CustomerID"&&header!="EmployeeID"){
								var itemChildNodes=orderItems[indexOfOrderItems].childNodes;
								var indexOfItemChildNodes=nextNodeType(itemChildNodes,3,-1);
								var text=itemChildNodes[indexOfItemChildNodes].nodeValue;
								body_text+="<td>"+text+"</td>";
							}
							else if(header=="ShipInfo"){
								var ShipInfoAttribures=orderItems[indexOfOrderItems].attributes;
								if(ShipInfoAttribures.length!=0){
									var indexOfAttributes=nextNodeType(ShipInfoAttribures,2,-1);
									var attribute=ShipInfoAttribures[indexOfAttributes].value;
									body_text+="<td>"+attribute+"</td>";
								}else{
									body_text+="<td>NULL</td>";
								}
								var ShipInfo=orderItems[indexOfOrderItems].childNodes;
								var indexOfShipInfo=nextNodeType(ShipInfo,1,-1);
								while(indexOfShipInfo!=-1){
									var shipInfoChildNodes=ShipInfo[indexOfShipInfo].childNodes;
									var indexOfShipInfoChildNodes=nextNodeType(shipInfoChildNodes,3,-1);
									var infoText=shipInfoChildNodes[indexOfShipInfoChildNodes].nodeValue;
									body_text+="<td>"+infoText+"</td>";
									indexOfShipInfo=nextNodeType(ShipInfo,1,indexOfShipInfo);
								}
							}

							indexOfOrderItems=nextNodeType(orderItems,1,indexOfOrderItems);
						}
						indexOfOrders=nextNodeType(orders,1,indexOfOrders);
						body_text+="</tr>";
					}
					indexOfOrdersRoots=nextNodeType(ordersRoots,1,indexOfOrdersRoots);
					
				}
				// var indexOfOrders=nextNodeType(orders,1,-1);
				
				


				body_text+="</table>"
				body_text+="</div>";
				document.write(body_text);
			}

			//Generate the default HTML codes that display the first page. The page includes a text input box and a submit button.
			//The codes will be written into the BODY by using document.write() method in the end of this function.
			function generateDefaultHTML(){
				body_text="<div id=\"main_content\" style=\"margin:200px 0;text-align:center;font-size:2em;\"><form name=\"form_main\" method=\"POST\" action=\"homework4.html\"><div id=\"title\">Enter Customer/Order XML File</div><input type=\"text\" name=\"URL_text\" size=\"60\"/><br/><input type=\"submit\" name=\"submit_button\" value=\"Submit Query\" onclick=\"openNewWindow('customers',this.form)\"/></div>";
				document.write(body_text);
			}

			//This function is used to deal with the white space problem in FireFox.
			//It will find the next index of a node which has the given nodetype from a set of nodes. 
			//Parameter nodes is a set of element nodes that need to be handle.nodeType is a number represents the nodetype that you want to finde. CurrentIndex is  start index. The finding process will begin from currentIndex.
			//If the node is find, the function will return its index. If not ,it will return -1.
			function nextNodeType(nodes,nodeType,currentIndex){
				currentIndex++;
				while(currentIndex<nodes.length&&nodes[currentIndex].nodeType!=nodeType){
					currentIndex++;
				}
				if(currentIndex<nodes.length)
					return currentIndex;
				else
					return -1;
			}

			//This function will open a new window. The parameter type determines whether the windows will display the customers list or the order data. The parameter form points out which form called this function. So you can get its data.
			//The new window's URL also points to this page. So the function will determine how to display this page.
			function openNewWindow(type,form){
				if(type=="customers"){
					if(form.URL_text.value==""||form.URL_text.value==null){
						alert("You must enter path of a XML file!");
						return;
					}
					xmlURL=form.URL_text.value;
					window.open("homework4.html?list=customers&url="+xmlURL,'Customers',"");
				}else if(type=="orders"){
					var i;
					var customerID;
					for(i=0;i<form.selectItem.length;i++){
						if(form.selectItem[i].checked){
							customerID=form.selectItem[i].value;
							break;
						}
					}

					if(i==form.selectItem.length){
						alert("You Must Select ONE Customer!");
						return;
					}
					window.open("homework4.html?list=orders&url="+URL+"&customerID="+customerID,'Orders',"")
				}
			}

			//This function determines which kind of data this page will display. 
			//It can get the URL patameter value whose names is 'list'. If the value equals 'customers' or 'orders', the page will try to get the URL patameter named 'url'(if list equals 'orders', tha 'customerID' parameter's value is also need to be got. ). If all the values are got, it will load the XML file and parse it, then call the corresponding function to display the data. 
			//If the URL has no parameters or the format is wrong, the page will dislay the form that prompt users to enter a XML file.
			//This function will be called automatically when the body tag is loading.
			function selectType(){
				if(Request("list")=="customers")
				{
					URL=Request("url");
					if(URL!=null){
						if(!loadXML(URL))
							this.close();
						else
							generateCustomerList();
					}

				}else if(Request("list")=="orders"){
					URL=Request("url");
					customerID=Request("customerID");
					if(URL!=null&&customerID!=null){
						if(!loadXML(URL))
							generateDefaultHTML();
						else
							generateOrderList(customerID);
					}
				}else{
					generateDefaultHTML();
				}
			}
		</script>
	</head>
	<body style="width:98%;" id="body">
		<script type="text/javascript">
		selectType();
		</script>
	<NOSCRIPT>
	</body>

</html>